<template>
  <div class="app-container">
    <el-tabs v-model="groupId" @tab-change="getDeviceList">
      <el-tab-pane v-for="(group,index) in deviceGroupList" :key="index" :label="group.value" :name="group.id" >
        <template v-if="groupId === group.id" v-for="(device,i) in deviceList" :key="i">
          <el-row :style="{ marginTop :i !==0 ? '10px' : '0'}">
            <el-col :span="24" >
              <el-card style="height: 100%;">
                <template #header>
                  <span >{{ device.deviceName }}</span>
                  <el-button link type="primary" style="margin-left: 10px" @click="goDetail(device)" v-hasPermi="['coal:sieving:detail']">
                    <svg-icon icon-class="linechart"
                              class="el-input__icon el-icon--left"
                              style="height: 15px;width: 15px;"
                    />
                    查看详情
                  </el-button>
                  <span style="float:right">单位：cm</span>
                </template>
                <el-row type="flex">
                  <el-col :span="12" class="card-box" style="padding-left: 5px">
                    <div class="el-table el-table--enable-row-hover el-table--medium">
                      <CameraPlayer :style="{width: '100%', height: '350px'}" v-if="cameraData[device.id]['id']" :device-id="cameraData[device.id]['id']"></CameraPlayer>
                      <el-empty v-else description="无视频监控" />
                    </div>

                  </el-col>
                  <el-col :span="12" class="card-box" style="padding-left: 5px">

                    <div class="el-table el-table--enable-row-hover el-table--medium">
                      <Current :device-id="device.id"></Current>
                    </div>

                  </el-col>

                </el-row>
              </el-card>
            </el-col>
          </el-row>

        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="Sieve">
import Current from './current.vue';
import CameraPlayer from '@/views/camera/index.vue';
import { getSieve } from '@/api/coal/device';
import { getGroupInfo } from '@/api/coal/deviceGroup';

const { proxy } = getCurrentInstance();
const router = useRouter();

const deviceList = ref([]);
const cameraData = ref({});
const deviceGroupList = ref([]);
const deviceId = ref(null);
const groupId = ref(null);

onMounted(() => {
  getGroupList()
})

function getGroupList() {
  getGroupInfo('2').then(response => {
    deviceGroupList.value = response.data
    groupId.value = deviceGroupList.value[0].id
    getDeviceList(groupId.value)
  })
}

function getDeviceList(parentGroupId){
  deviceList.value = []
  getSieve(parentGroupId).then(resp =>{
    deviceList.value = resp.data
    cameraData.value = resp.cameraData
  })
}

function goDetail(device){
  router.push({ path: "/sieving/detail", query: { deviceId: device.id,deviceName:device.deviceName } });
}
</script>
